<template>
	<view class="box bg-f7">
		<view class="index-bg">
			<image :src="BASE_URL +'/uploads/20250801/2ec50fa1c5a0f6b3c224709d3ae527c2.png' " mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#Fff"}' leftIconColor='#fff' title="健康报告" bgColor="transparent"
				:fixed="false" @rightClick="rightClick" :autoBack="true"> </u-navbar>
			<view class="padding-l-r-25">

				<view class="margin-t-20 role-box flex-box">
                    <view class="z-1 flex-box" style="width: 100%;">
                        <scroll-view scroll-x style="max-width: 580rpx;">
                            <view class="align-items-center">
                                <view class=" flex-column role-list" :class="{'active':roleIndex == 0}"
                                      @click="getViewInfo(sickItem ,0)">
                                    <view class="avatar-box">
                                        <image :src="sickItem.avatar" mode="aspectFill"></image>
                                    </view>
                                    <text>{{sickItem.name}}</text>
                                    <view class="role-text role-type">
                                        主账号
                                    </view>
                                    <view class="triangle-img">
                                        <image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
                                    </view>
                                </view>

                                <view v-for="(item,index) in roleList" :class="{'active':roleIndex == index+1}" :key="index"
                                      class=" flex-column role-list" @click="getViewInfo(item ,index+1)">
                                    <view class="avatar-box">
                                        <image :src="item.avatar" mode="aspectFill"></image>
                                    </view>
                                    <text class="only-1">{{item.name}}</text>

                                    <view class="role-text1 role-type">
                                        {{item.relation}}
                                    </view>
                                    <view class="triangle-img">
                                        <image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                        <view class="flex-1"></view>
                        <view class="add-role flex-column fs-26" @click="add">
                            <image src="/static/image/BasicHealth/add.png" mode="widthFix"></image>
                            <text>添加</text>
                        </view>
                    </view>
				</view>
			</view>
			<view class="padding-30">
				<view class="bg-white padding-l-r-20 border-radio-14" v-if="physicalReport && physicalReport.length">
					<view class="fs-32 color-0 fw-b title">这里是体检报告</view>
					<view class="bg-f7 border-radio-14 padding-l-r-20">
						<view v-for="(item ,index) in physicalReport" class="margin-b-20" :key="index">
							<view class="line" v-if="index"></view>
							<view class="list-title fs-32">
								{{item.check_name}}
							</view>
							<view class="bg-f7 padding-20 fs-28 list-item">
								<view class="margin-b-10">
									体检时间：<text>{{item.check_date}}</text>
								</view>
								<view class="margin-b-10">
									体检报告：<text>{{item.check_describe}}</text>
								</view>
							</view>
							<view class="padding-t-b-20 align-items-center flex-wrap">
								<view v-for="e in item.imagesArr" class="margin-r-20 margin-b-20">
									<u--image :src="BASE_URL+e" width='140rpx' height='140rpx' radius='14rpx'
										mode="widthFix"></u--image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-else class="bg-white padding-l-r-20 border-radio-14" >
					<view class="padding-t-b-30">
						<u-empty mode="order" text="暂无体检报告">
						</u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		familyList
	} from '@/api/basicHealth'
	import {
		familyData,
		historyDetail,
		sickDetail,
		historyEdit,
		liveDetail,
		liveEdit,
		tijianList,
		seeList,
	} from '@/api/family'
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	export default {
		data() {
			return {
				BASE_URL,
				sickItem: {},
				roleList: [],
				roleIndex: 0,
				tijianInfo: {},
				page: 1,
				physicalReport: []
			}
		},

		onShow() {
			this.getFamilyData()
		},
		methods: {
			getFamilyData() {
				this.roleList = []
				familyData().then(res => {
					if (res.code == 1) {
						res.data.sick_list.map(item => {
							if (item.relation == '本人') {
								this.sickItem = item
								this.getViewInfo(this.sickItem, 0)
							} else {
								this.roleList.push(item)
							}
						})
						this.doctor = res.data.doctor
						console.log(this.roleList)
					}
				})
			},
            add() {
                uni.navigateTo({
                    url: '/pageA/family/add'
                })
            },
			getInfoDetail(id) {
				let params = {
						page: this.page,
						limit: 20,
						sick_id: id
					},
					arr = []
				tijianList(params).then(res => {
					if (res.code == 1) {
						res.data.map(item => {
							let imagesArr = item.images.split(',')
							item.imagesArr = imagesArr
							arr.push(item)
						})

						this.physicalReport = this.physicalReport.concat(arr)
					}
				})
			},

			goHealthReport() {
				uni.navigateTo({
					url: "/pageA/BasicHealth/healthReport"
				})
			},



			getViewInfo(item, index) {
				this.roleIndex = index
				this.patientInfo = item
				this.getInfoDetail(item.id)
			}
		}
	}
</script>
<style scoped lang="scss">
	@import "css/index";

	.title {
		line-height: 96rpx;
	}
</style>